<script lang="ts">
import {Ref, ref, UnwrapRef, defineComponent, SlotsType, PropType} from "vue"

export default defineComponent({
  emits: {
    search: () => true
  },
  slots: Object as SlotsType<{ default: {}, more: {}, buttons: {} }>,
  props: {
    title: {
      type: String
    },
    disabled: {
      type: Boolean,
      default: false
    },
    size: {
      type: String as PropType<'small' | 'default' | 'large'>,
      default: 'default'
    },
    labelWidth: {
      type: [String, Number]
    }
  },
  setup(props, {slots, emit}) {
    const expand: Ref<UnwrapRef<boolean>> = ref(false)

    const width: string | number = props.labelWidth ? props.labelWidth : ''

    /**
     * 触发搜索
     */
    function toSearch() {
      emit('search')
      expand.value = false
    }

    const model = ref({})
    return {
      expand,
      model,
      slots,
      toSearch,
      width
    }
  }
})
</script>
<template>
  <div>
    <div class="search-box" :class="{'search-expand':expand,'search-inline':expand===false}">
      <div class="form-title" v-if="expand && title">
        <svg-icon size="20px" name="search"/>
        {{ title }}
      </div>
      <el-form :size :label-width="expand?'auto':width" :model :disabled :inline="!expand" :label-position="expand?'right':'left'">
        <slot name="default" :disabled="disabled"></slot>
        <div v-show="expand">
          <slot name="more" :disabled="disabled"></slot>
        </div>
        <el-form-item class="search-button" label=" ">
          <el-space>
            <slot name="buttons" :disabled="disabled"></slot>
            <el-button-group>
              <el-button type="primary" :disabled @click="toSearch">搜索</el-button>
              <el-button type="primary" class="change-expand" :disabled v-if="typeof slots.more !=='undefined'" @click="expand=!expand">
                <template #icon>
                  <app-icon v-if="expand" name="ArrowUpBold"></app-icon>
                  <app-icon v-else name="ArrowRightBold"></app-icon>
                </template>
              </el-button>
            </el-button-group>
          </el-space>
        </el-form-item>
      </el-form>
    </div>
    <!--    这个只是展位，防止高度变化导致页面抖动-->
    <div class="search-box search-inline search-placeholder" v-if="expand">
      <el-form :size label-width="width" inline label-position="left">
        <el-form-item>
          <el-input placeholder="只是占位"></el-input>
        </el-form-item>
        <el-form-item class="search-button">
          <el-space>
            <el-button-group>
              <el-button type="primary">占位</el-button>
            </el-button-group>
          </el-space>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>